<script lang="ts">
/**
 * 应用于表格视图
 */
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { State, namespace } from "vuex-class";

@Component
export default class TableView extends Vue {
  private mounted() {
    const targetNode: HTMLElement = document.getElementById(
      "table-view"
    ) as HTMLElement;
    const config = { attributes: true, childList: true, subtree: true };
    const callback = (mutationsList: any) => {
      for (const mutation of mutationsList) {
        if (mutation.type === "childList") {
          // console.log('A child node has been added or removed.');
        } else if (mutation.type === "attributes") {
          // console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
      }
    };
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  }
}
</script>

<template>
  <section id="table-view" class="table-view re-md-sm-padding">
    <header>
      <slot name="header"></slot>
    </header>
    <div class="table-view__body">
      <slot name="body"></slot>
    </div>
    <footer>
      <slot name="footer"></slot>
    </footer>
    <slot></slot>
  </section>
</template>

<style lang="less">
.table-view {
  display: flex;
  flex-direction: column;
  background: #fff;
  // max-height: 100%;
  // padding: 16px;
  header {
    // margin-bottom: 16px;
  }
  &__body {
    flex: 1;
    overflow: auto;
  }
  footer {
    padding-top: 8px;
  }
}
</style>
